<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>好"孕"来 - 暖心服务</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: linear-gradient(135deg, #fff9fb 0%, #fff5f7 100%);
      color: #333;
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M50,50 Q100,20 150,50 T200,100 Q170,150 100,150 T0,100 Q30,50 50,50 Z" fill="rgba(255,182,193,0.1)"/></svg>');
      background-size: 300px;
      opacity: 0.3;
      z-index: -1;
    }

    .header {
      background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
      color: white;
      padding: 20px 15px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      box-shadow: 0 2px 15px rgba(0,0,0,0.05);
      border-bottom: 1px solid rgba(255,255,255,0.3);
    }

    .header h1 {
      font-size: 20px;
      text-align: center;
      font-weight: 600;
      letter-spacing: 1px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.25);
      border: 1px solid rgba(255,255,255,0.4);
      color: white;
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
      backdrop-filter: blur(5px);
      transition: all 0.3s ease;
    }

    .container {
      padding: 90px 15px 30px;
      max-width: 600px;
      margin: 0 auto;
    }

    .section-card {
      background: rgba(255, 255, 255, 0.85);
      border-radius: 20px;
      padding: 25px;
      margin-bottom: 25px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }

    .section-card::before {
      content: "";
      position: absolute;
      top: -50px;
      right: -50px;
      width: 100px;
      height: 100px;
      background: rgba(255, 182, 193, 0.2);
      border-radius: 50%;
      z-index: -1;
    }

    .section-title {
      font-size: 19px;
      margin-bottom: 15px;
      color: #5a2d3e;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-icon {
      font-size: 24px;
    }

    .service-item {
      padding: 15px 0;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .service-item:hover {
      background: rgba(255, 182, 193, 0.05);
      margin: 0 -25px;
      padding-left: 25px;
      padding-right: 25px;
      border-radius: 12px;
    }

    .service-item:last-child {
      border-bottom: none;
    }

    .service-name {
      font-size: 16px;
      color: #333;
    }

    .service-desc {
      font-size: 13px;
      color: #8a6d7c;
      margin-top: 4px;
    }

    .arrow {
      font-size: 18px;
      color: #ccc;
    }

    .btn {
      background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
      color: white;
      border: none;
      padding: 14px;
      border-radius: 30px;
      font-size: 16px;
      cursor: pointer;
      width: 100%;
      margin-top: 15px;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      font-weight: 600;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
      border: 1px solid rgba(255,255,255,0.4);
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }

    /* 子页面样式 */
    .page {
      display: none;
      animation: fadeIn 0.4s ease-out;
    }

    .page.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-label {
      display: block;
      font-size: 15px;
      color: #5a2d3e;
      margin-bottom: 10px;
      font-weight: 500;
    }

    .form-control {
      width: 100%;
      padding: 14px;
      border: 1px solid rgba(255, 182, 193, 0.4);
      border-radius: 12px;
      font-size: 15px;
      transition: all 0.3s ease;
      background: rgba(255, 255, 255, 0.7);
    }

    .form-control:focus {
      outline: none;
      border-color: #ff9a9e;
      box-shadow: 0 0 0 3px rgba(255, 154, 158, 0.2);
    }

    textarea.form-control {
      resize: vertical;
      min-height: 100px;
    }

    .status-badge {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      background: rgba(123, 239, 178, 0.15);
      color: #0c8f61;
      border: 1px solid rgba(123, 239, 178, 0.3);
    }

    .status-badge.busy {
      background: rgba(255, 182, 193, 0.15);
      color: #d63384;
      border-color: rgba(255, 182, 193, 0.3);
    }

    .info-text {
      font-size: 13px;
      color: #8a6d7c;
      margin-top: 10px;
      line-height: 1.5;
    }

    .video-card {
      background: rgba(255, 255, 255, 0.7);
      border-radius: 15px;
      padding: 15px;
      margin-bottom: 15px;
      border: 1px solid rgba(255, 182, 193, 0.3);
    }

    .video-title {
      font-size: 16px;
      color: #5a2d3e;
      margin-bottom: 8px;
      font-weight: 600;
    }

    .video-desc {
      font-size: 13px;
      color: #8a6d7c;
      margin-bottom: 10px;
    }

    .video-player {
      width: 100%;
      height: 180px;
      background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 40px;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.4);
    }

    @media (max-width: 480px) {
      .header h1 {
        font-size: 18px;
      }
    }
  </style>
</head>
<body>

  <!-- 暖心服务主页面 -->
  <div id="mainPage" class="page active">
    <div class="header">
      <button class="back-btn" onclick="window.location.href='index.html#userMenu'">返回</button>  <!-- 返回欢迎界面 1014本次修改 -->
      <h1>好"孕"来 - 暖心服务</h1>
    </div>

    <div class="container">
      <!-- 红色文件学习 -->
      <div class="section-card">
        <div class="section-title">
          ❤️‍🔥红心妈妈课堂
        </div>
        <div class="service-item" onclick="showPage('redDocsPage')">
          <div>
            <div class="service-name">党建学习库</div>
            <div class="service-desc">重要文件、政策解读、党史资料</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('redTestPage')">
          <div>
            <div class="service-name">党建知识测试</div>
            <div class="service-desc">每日答题、专题测试、学习评估</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('redActivityPage')">
          <div>
            <div class="service-name">党建主题活动</div>
            <div class="service-desc">线上学习、心得分享</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>

      <!-- 母爱成长学院 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🎓</span>
          母爱成长学院
        </div>
        <div class="service-item" onclick="showPage('knowledgePage')">
          <div>
            <div class="service-name">分阶段知识</div>
            <div class="service-desc">备孕/孕期/分娩/产后/早教，一站式学习</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('offlinePage')">
          <div>
            <div class="service-name">线下/直播活动</div>
            <div class="service-desc">专家讲座、互动答疑、经验分享</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>

      <!-- 孕育贴心管家 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🤱</span>
          孕育贴心管家
        </div>
        <div class="service-item" onclick="showPage('timelinePage')">
          <div>
            <div class="service-name">全周期提醒</div>
            <div class="service-desc">产检/筛查/疫苗/复查，一键添加日历</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('bagPage')">
          <div>
            <div class="service-name">待产包清单</div>
            <div class="service-desc">标准清单+行政申领通道，省心省力</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>

      <!-- 产科导航 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🏥</span>
          产科导航
        </div>
        <div class="service-item" onclick="showPage('hospitalPage')">
          <div>
            <div class="service-name">医院/医生大全</div>
            <div class="service-desc">排名+口碑+号源，实时更新</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('registerPage')">
          <div>
            <div class="service-name">智能挂号提醒</div>
            <div class="service-desc">根据孕周推送大排畸、糖筛等挂号节点</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>

      <!-- 孕产心理滋养中心 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">💆</span>
          心理滋养中心
        </div>
        <div class="service-item" onclick="showPage('assessPage')">
          <div>
            <div class="service-name">压力评估</div>
            <div class="service-desc">匿名问卷+生理数据，智能预警</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('counselPage')">
          <div>
            <div class="service-name">专业咨询</div>
            <div class="service-desc">视频/语音一对一，全程加密</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>

      <!-- 暖心妈妈圈 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">💬</span>
          暖心妈妈圈
        </div>
        <div class="service-item" onclick="showPage('forumPage')">
          <div>
            <div class="service-name">交流论坛</div>
            <div class="service-desc">备孕·产检·待产·育儿，匿名分享</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('activityPage')">
          <div>
            <div class="service-name">线上活动</div>
            <div class="service-desc">专家空降、主题讨论、福利抽奖</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 红色文件库页 -->
  <div id="redDocsPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>红色文件库</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📚</span>
          重要文件与资料
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">《中国共产党章程》</div>
            <div class="service-desc">最新修订版，党员必学资料</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">《习近平新时代中国特色社会主义思想学习纲要》</div>
            <div class="service-desc">理论体系全面解读</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">党史学习资料</div>
            <div class="service-desc">建党百年光辉历程</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">重要政策文件汇编</div>
            <div class="service-desc">最新政策解读与学习资料</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <button class="btn">查看更多文件</button>
      </div>
    </div>
  </div>

  <!-- 红色知识测试页 -->
  <div id="redTestPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>红色知识测试</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📝</span>
          今日答题
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">每日一练</div>
            <div class="service-desc">5道题目，巩固基础知识</div>
          </div>
          <span class="status-badge">未完成</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">专题测试：党史知识</div>
            <div class="service-desc">20道题目，检验学习成果</div>
          </div>
          <span class="status-badge">已完成</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">月度考核</div>
            <div class="service-desc">综合评估，检验学习成效</div>
          </div>
          <span class="status-badge">未开始</span>
        </div>
        <div class="info-text">完成每日答题可获得积分，积分可用于兑换学习资料</div>
        <button class="btn">开始今日答题</button>
      </div>
    </div>
  </div>

  <!-- 红色主题活动页 -->
  <div id="redActivityPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>红色主题活动</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🎯</span>
          近期活动
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">12月20日 14:00</div>
            <div class="service-desc">"传承红色基因"线上学习会</div>
          </div>
          <span class="status-badge">报名中</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">1月5日 19:30</div>
            <div class="service-desc">"我的入党故事"线上分享会</div>
          </div>
          <span class="status-badge">报名中</span>
        </div>
        <div class="info-text">参与活动可获得学习积分，优秀心得将展示在学习专栏</div>
        <button class="btn">查看全部活动</button>
      </div>
    </div>
  </div>

  <!-- 以下为原有页面，保持不变 -->
  <!-- 分阶段知识页 -->
  <div id="knowledgePage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>分阶段知识</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📚</span>
          当前阶段：孕中期（24周）
        </div>
        <div class="video-card">
          <div class="video-title">数胎动正确姿势</div>
          <div class="video-desc">每天3次，每次1小时，连续记录更精准</div>
      <div class="video-player">
      <video width="100%" height="100%" controls style="border-radius: 10px;">
        <source src="video/taidong.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
      </video>
      </div>
        </div>
        <div class="video-card">
          <div class="video-title">孕期瑜伽·缓解腰背痛</div>
          <div class="video-desc">安全拉伸，增强核心，8分钟跟练</div>
      <div class="video-player">
      <video width="100%" height="100%" controls style="border-radius: 10px;">
        <source src="video/yujia.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
      </video>
      </div>
        </div>
        <div class="video-card">
          <div class="video-title">补铁饮食</div>
          <div class="video-desc">动物肝、红肉、深绿蔬菜，搭配维C吸收翻倍</div>
      <div class="video-player">
      <video width="100%" height="100%" controls style="border-radius: 10px;">
        <source src="video/butie.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
      </video>
      </div>
        </div>
        <button class="btn">查看更多</button>
      </div>
    </div>
  </div>

  <!-- 其他原有页面保持不变 -->
  <!-- 线下/直播活动页 -->
  <div id="offlinePage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>线下/直播活动</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="service-item">
          <div>
            <div class="service-name">12月22日 15:00</div>
            <div class="service-desc">《分娩方式选择》· 李主任直播 · 可回看</div>
          </div>
          <span class="status-badge">报名中</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">12月28日 10:00</div>
            <div class="service-desc">《新生儿护理实操》· 线下实操 · 限20人</div>
          </div>
          <span class="status-badge">已满员</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">1月5日 19:30</div>
            <div class="service-desc">《产后情绪管理》· 心理专家 · 线上直播</div>
          </div>
          <span class="status-badge">报名中</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 全周期提醒页 -->
  <div id="timelinePage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>全周期提醒</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📅</span>
          近期提醒
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">12月20日 08:00</div>
            <div class="service-desc">OGTT糖耐筛查 · 空腹 · 带300ml温水</div>
          </div>
          <span class="status-badge">未打卡</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">12月22日 09:00</div>
            <div class="service-desc">四维彩超（大排畸）· 无需空腹</div>
          </div>
          <span class="status-badge">未打卡</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">新生儿乙肝疫苗①</div>
            <div class="service-desc">产后24小时内 · 自动提醒</div>
          </div>
          <span class="status-badge">系统</span>
        </div>
        <button class="btn">一键同步到日历</button>
      </div>
    </div>
  </div>

  <!-- 待产包清单页 -->
  <div id="bagPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>待产包清单</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🧳</span>
          标准清单（已勾选常用）
        </div>
        <div style="margin-bottom:15px;">
          <label style="display:flex; align-items:center; margin-bottom:10px;">
            <input type="checkbox" checked> 产妇卫生巾（夜用加长）
          </label>
          <label style="display:flex; align-items:center; margin-bottom:10px;">
            <input type="checkbox" checked> 一次性产褥垫
          </label>
          <label style="display:flex; align-items:center; margin-bottom:10px;">
            <input type="checkbox"> 哺乳内衣
          </label>
          <label style="display:flex; align-items:center; margin-bottom:10px;">
            <input type="checkbox"> 收腹带
          </label>
          <label style="display:flex; align-items:center; margin-bottom:10px;">
            <input type="checkbox"> 宝宝NB纸尿裤
          </label>
          <label style="display:flex; align-items:center; margin-bottom:10px;">
            <input type="checkbox"> 宝宝湿巾
          </label>
        </div>
        <div class="info-text">已选 2/6 件 · 预计重量 0.8 kg</div>
        <button class="btn">行政申领通道</button>
      </div>
    </div>
  </div>

  <!-- 医院/医生大全页 -->
  <div id="hospitalPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>医院/医生大全</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🏥</span>
          福州热门产科
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">福建省妇幼保健院</div>
            <div class="service-desc">三甲 · 产科全国排名36 · 距离3.2km</div>
          </div>
          <span class="status-badge">推荐</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">福州总医院（900医院）</div>
            <div class="service-desc">三甲 · 军人优先 · 距离5.1km</div>
          </div>
          <span class="status-badge">好评</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">福州市第一医院</div>
            <div class="service-desc">三甲 · 新院区环境佳 · 距离6.8km</div>
          </div>
          <span class="status-badge">环境好</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 智能挂号提醒页 -->
  <div id="registerPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>智能挂号提醒</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🩺</span>
          即将开放号源
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">大排畸（20-24周）</div>
            <div class="service-desc">放号时间：每周三 20:00 · 需提前1周预约</div>
          </div>
          <button class="btn" style="padding: 6px 12px; font-size: 13px; margin: 0;">设置提醒</button>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">糖耐量试验（24-28周）</div>
            <div class="service-desc">放号时间：每周五 20:00 · 空腹</div>
          </div>
          <button class="btn" style="padding: 6px 12px; font-size: 13px; margin: 0;">设置提醒</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 压力评估页 -->
  <div id="assessPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>压力评估</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📊</span>
          匿名问卷（2分钟）
        </div>
        <div class="form-group">
          <label class="form-label">最近一周，您感到焦虑的频率？</label>
          <select class="form-control">
            <option>几乎没有</option>
            <option>偶尔几天</option>
            <option>一半以上天数</option>
            <option>几乎每天</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">睡眠时长与质量</label>
          <select class="form-control">
            <option>>7小时且醒来精神好</option>
            <option>6-7小时，偶尔醒来</option>
            <option>5-6小时，易醒/多梦</option>
            <option><5小时，难以入睡</option>
          </select>
        </div>
        <div class="info-text">数据仅用于生成建议，全程匿名。</div>
        <button class="btn">获取评估结果</button>
      </div>
    </div>
  </div>

  <!-- 专业咨询页 -->
  <div id="counselPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>专业咨询</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">👩‍⚕️</span>
          选择咨询师
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">王蕊 · 国家二级心理咨询师</div>
            <div class="service-desc">专注孕产焦虑 · 可预约时段：今天 19:00-21:00</div>
          </div>
          <span class="status-badge">空闲</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">李婧 · 注册心理师</div>
            <div class="service-desc">伴侣沟通 · 可预约时段：明天 20:00-22:00</div>
          </div>
          <span class="status-badge">空闲</span>
        </div>
        <div class="info-text">所有咨询均加密存储，支持匿名昵称。</div>
        <button class="btn">立即预约</button>
      </div>
    </div>
  </div>

  <!-- 交流论坛页 -->
  <div id="forumPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>交流论坛</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🔥</span>
          热门板块
        </div>
        <div class="service-item" onclick="alert('进入板块')">
          <div>
            <div class="service-name">产检交流站</div>
            <div class="service-desc">NT、大排畸、糖耐经验贴 · 1.2k 新帖</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="alert('进入板块')">
          <div>
            <div class="service-name">待产攻略集</div>
            <div class="service-desc">医院选择、待产包、产程经验 · 896 新帖</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="alert('进入板块')">
          <div>
            <div class="service-name">育儿启蒙园</div>
            <div class="service-desc">母乳、辅食、早教、疫苗 · 1.5k 新帖</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 线上活动页 -->
  <div id="activityPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>线上活动</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="service-item">
          <div>
            <div class="service-name">🎤 新手妈妈情绪工作坊</div>
            <div class="service-desc">今晚 20:00 · 专家带领 · 限50人</div>
          </div>
          <span class="status-badge">报名中</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">🎁 晒待产包抽奖</div>
            <div class="service-desc">12月20日 - 12月25日 · 参与即送积分</div>
          </div>
          <span class="status-badge">进行中</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">🎄 圣诞孕妈线上派对</div>
            <div class="service-desc">12月24日 19:30 · 游戏+抽奖+经验分享</div>
          </div>
          <span class="status-badge">即将开始</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function showPage(pageId) {
      const pages = document.querySelectorAll('.page');
      pages.forEach(page => page.classList.remove('active'));
      const target = document.getElementById(pageId);
      if (target) target.classList.add('active');
      window.scrollTo(0, 0);
    }

    document.addEventListener('DOMContentLoaded', () => {
      // 设置默认时间
      const now = new Date();
      now.setDate(now.getDate() + 1);
      const dateTimeLocal = now.toISOString().slice(0, 16);
      document.querySelectorAll('input[type="datetime-local"]').forEach(input => {
        input.value = dateTimeLocal;
      });

      // 触摸反馈
      const items = document.querySelectorAll('.service-item, .btn, .video-player');
      items.forEach(item => {
        item.addEventListener('touchstart', () => {
          item.style.transform = 'scale(0.98)';
        });
        item.addEventListener('touchend', () => {
          item.style.transform = '';
        });
      });

      // 表单提交
      document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', e => {
          e.preventDefault();
          alert('提交成功！');
        });
      });
    });

  // 返回到欢迎页面 1014本次修改
  document.addEventListener('DOMContentLoaded', function () {
    const urlParams = new URLSearchParams(window.location.search);
    const from = urlParams.get('from');

    const backBtn = document.getElementById('backBtn');
    if (from === 'userMenu') {
      backBtn.onclick = function () {
        window.location.href = 'index.html#userMenu';
      };
    } else {
      backBtn.onclick = function () {
        window.location.href = 'index.html';
      };
    }
  });

  </script>
</body>
</html>